<template>
  <div class="list">
    <vue-seamless-scroll :data="list" :class-option="optionTop" class="seamless-warp">
      <ul>
        <li v-for="(item, index) of list" :key="index">
          <div class="item">
            <span class="name">{{ item.hdmc }}</span>
            <div class="value">
              <img src="../../assets/dasboard/icon-location.png" height="20" width="20" /><span>{{
                item.address
              }}</span>
            </div>
            <div class="value">
              <img src="../../assets/dasboard/icon-time.png" height="20" width="20" /><span>{{ item.start }}~{{ item.end }}</span>
            </div>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import {getAction } from '@/api/manage'
export default {
  data() {
    return {
      url: "/veterans/sysActivities/list",
      list: [
        // { name: '优待联盟活动', address: '东小店街宿迁味道', time: '2023-09-08 ~ 2023-09-12' },
        // { name: '优待联盟活动', address: '东小店街宿迁味道', time: '2023-09-08 ~ 2023-09-12' },
        // { name: '优待联盟活动', address: '东小店街宿迁味道', time: '2023-09-08 ~ 2023-09-12' }, 
      ],
    }
  },
  computed: {
    optionTop() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 70, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  mounted(){
    getAction(this.url, {pageNo: 1,pageSize: 50}).then((res) => {
        if (res.success) {
          this.list = res.result.records||res.result;
        }else{
          this.$message.warning(res.message)
        }
      })
  },
}
</script>

<style lang="less" scoped>
.list {
  height: 240px;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  padding: 9px 15px;
  .seamless-warp {
    flex: 1;
    overflow-y: hidden;

    ul {
      display: flex;
      flex-direction: column;
      list-style: none!important;
      padding: 0;
      margin: 0;
      li { 
        .item {
          background: url('../../assets/dasboard/bg-activity.png') no-repeat;
          background-size: 100% 100%;
          padding: 8px 14px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          margin-bottom: 8px;
          .name {
            grid-column: span 2 / auto;
            margin-bottom: 10px;
            color: #3b4f5d;
            font-size: 14px;
            font-weight: bold;
          }
          .value {
            font-size: 12px;
            color: #3b4f5d;
            display: flex;
            align-items: center;

            span {
              margin-left: 5px;
            }
          }
        }
      } 
    }
  }
}
</style>